<template>
  <div>
    <!-- 列表页面 -->
    <div class="container" v-if="!showEdit">
      <div class="header">
        <div class="title">查看候选人</div>
        <el-button style="margin: 0 20px" @click="handleEdit('add')" size="small" type="primary">新增</el-button>
      </div>
      <!-- 下拉筛选 -->
      <div class="select-group">
        <div class="select-box">
          <span>候选人状态 </span>
          <el-select
            size="medium"
            clearable
            @change="handkeSearch"
            filterable
            v-model="searchMenu.candStatu"
            placeholder="请选择"
          >
            <el-option v-for="(item, index) in getDictiteList2" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <span>推荐职位</span>
          <el-cascader v-model="jobIdArr" clearable :options="getDictiteList11" @change="handkeSearch"></el-cascader>
        </div>

        <div class="select-box">
          <span>所属HR</span>
          <el-select
            size="medium"
            @change="handkeSearch"
            clearable
            filterable
            v-model="searchMenu.belongUserId"
            placeholder="请选择"
          >
            <el-option v-for="item in getDictiteListHr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="select-group">
        <div class="select-box">
          <span> 推荐日期 </span>
          <el-date-picker
            @change="handkeSearch"
            :disabledDate="false"
            v-model="searchMenu.recDate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>

        <div class="select-box">
          <el-radio-group @change="handkeSearch" v-model="searchMenu.nature">
            <el-radio :label="0">兼职</el-radio>
            <el-radio :label="1">全职</el-radio>
            <el-radio :label="2">实习</el-radio>
            <el-radio :label="''">全部</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 表格 -->
      <el-table :data="listInof" v-loading="loading">
        <!-- <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column> -->
        <el-table-column prop="candName" label="候选人" width="150"></el-table-column>
        <!-- 所属部门 -->
        <el-table-column prop="deptName" label="所属部门" width="150"></el-table-column>
        <el-table-column prop="jobName" label="职位名称" width="150"></el-table-column>
        <el-table-column prop="recDate" label="推荐日期" width="150"></el-table-column>
        <el-table-column prop="belongUserName" label="所属HR" width="150"></el-table-column>
        <el-table-column prop="candStatuLabel" label="状态" width="150"></el-table-column>
        <!-- <el-table-column prop="remark" label="推荐评语" width="200"></el-table-column> -->
        <el-table-column prop="action" fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-dropdown
              @command="
                command => {
                  handleCommand(command, scope.row)
                }
              "
            >
              <el-button type="primary" plain size="small">
                操作<el-icon class="el-icon-arrow-down el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="distribution">
                    <el-button plain size="small" type="primary">分配职位</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="download">
                    <el-button plain size="small" type="primary">下载简历</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="archive">
                    <el-button plain size="small" type="danger"> 归 档 </el-button>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item command="b">下载简历</el-dropdown-item>
                  <el-dropdown-item command="c">淘汰</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="" fixed="right" width="200">
          <template #default="scope">
            <el-button plain size="small" type="success" @click="handleEdit('edit', scope.row)">编辑</el-button>
            <el-button plain size="small" type="danger" @click="handleDelete('delete', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @prev-click="changePage"
        @current-change="changePage"
        @next-click="changePage"
        style="float: right"
        background
        layout="prev, pager, next,total"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 编辑页面 -->
    <candidate-modify
      v-else
      @editClose="editClose"
      :getDictiteListHr="getDictiteListHr"
      :getDictiteList11="getDictiteList11"
      :editData="editData"
      :title="title"
    ></candidate-modify>
    <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog{{dialogFormVisible}}</el-button> -->
    <el-dialog title="提示" :visible.sync="dialogFormVisible" center>
      <div class="dialog-box">
        <div class="dialog-title">此操作会将该人才归档 是否继续?</div>
        <div class="dialog-text">
          <div class="dialog-i">姓名：{{ dialogInfo.dialogNmae }}</div>
          <div class="dialog-i">职位：{{ dialogInfo.dialogPosition }}</div>
          <div class="dialog-i">手机 ：{{ dialogInfo.dialogTel }}</div>
          <div class="dialog-i">期望薪资：{{ dialogInfo.dialogSalary }}K</div>
          <div class="remark">
            <div style="width: 10%">备注：</div>
            <el-input
              style="width: 90%; display: inline-block"
              maxlength="100"
              type="textarea"
              v-model="remark"
              autocomplete="off"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            () => {
              ;(dialogFormVisible = false), (delId = '')
            }
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="deleteCand">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { onMounted, ref } from 'vue'
// import { ElMessageBox, ElMessage } from 'element-plus'
// import { ArrowDown } from '@element-plus/icons-vue'
import Vue from 'vue'
import toolModel from '@/model/tool'
import candidateModel from '@/model/candidate'
import positionModel from '@/model/position'
import candidateModify from './detail'
import getAxios from '@/model/zd.js' // 接口缓存

// import { Element } from '@antv/g'
export default {
  components: {
    candidateModify,
  },
  data() {
    return {
      jobIdArr: [],
      delId: '',
      //详情标题
      title: '',
      //字典
      getDictiteList1: [],
      getDictiteList2: [],
      getDictiteList3: [],
      getDictiteList4: [],
      getDictiteList5: [],
      getDictiteList6: [],
      getDictiteList10: [],
      getDictiteList11: [],
      getDictiteListHr: [],
      getDictiteListHr2: [],
      //字典字典
      dictiteList: {
        1: '性别',
        2: '候选人状态',
        3: '职位级别',
        4: '学历要求',
        5: '职位渠道',
        6: '职位性质',
        7: '优先级',
        8: '职位来源',
        9: '工作经验',
        10: '所属部门',
      },
      //父组件传值 默认值
      editData: {
        behavior: '', //行为
        candId: '', //对象id
      },
      //时间选择参数
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
          // return (time.getTime() < this.setTimeForm.openDate || time.getTime() < Date.now())
        },
      },
      //查询参数
      searchMenu: {
        candStatu: '',
        // jobName: '',
        jobId: '',
        belongUserId: '',
        // minsalary: '',
        // maxsalary: '',
        recDate: '',
        nature: '',
      },
      listInof: [], //列表数据
      // 页面参数
      total: 0, //数据总数
      dialogFormVisible: false, //弹出框显示
      formLabelWidth: '60px', //评价行宽度
      loading: false, //加载动作
      showEdit: false, //详情页面
      radio: 1, //多选值
      // 提示框数据
      dialogInfo: {
        dialogNmae: '',
        dialogPosition: '',
        dialogTel: '',
        dialogSalary: '',
      },
      remark: '',
    }
  },
  mounted() {
    // this.init()
  },
  created() {
    //人员信息查询
    //  this.employee()
    this.test()
  },
  methods: {
    dictRequest(type, refresh = false) {
      getAxios(`/admin/dict/type/${type}`, {
        cache: true, // 是否开启缓存
        repeat: true, // 是否开启防止同时发起多个相同请求
        refresh: refresh, // 是否刷新
      })
    },
    async deleteCand() {
      var that = this
      that.loading = true
      let res = await candidateModel.candidateDel({
        candId: that.delId,
      })
      if (res.code == 200) {
        Vue.prototype.$notify({
          title: res.msg,
          dangerouslyUseHTMLString: false,
          message: res.data,
        })
      }
      that.init()
      that.loading = false
      that.dialogFormVisible = false
    },
    changePage(page) {
      this.getcandidates(page, 10)
      console.log(page, 'page')
    },
    //字典获取
    async dictitem(dictId) {
      var that = this
      const res = await toolModel.dictitem({
        dictId: dictId,
      })
      const allData = [...res.data]
    },
    // 生成字典
    async getDictiteList(dictId) {
      const res = await toolModel.dictitem({
        dictId: dictId,
      })
      const allData = res.data
      const result = []
      allData.map(ele => {
        result.push({
          value: ele.itemValue,
          label: ele.itemText,
        })
      })
      return result
    },
    async getTree(dictId) {
      var that = this
      let res = await that.getDictiteList(dictId)
      let tree = res.reduce((memo, current) => {
        memo[current['value']] = current
        return memo
      }, {})
      console.log(tree, 'tree')
      return tree
    },
    //下拉操作
    handleCommand(command, row) {
      this.handleEdit(command, row)
    },
    handleClick(dropdown) {
      // eslint-disable-next-line
      alert('button click')
    },
    // 员工信息
    async employee() {
      let that = this
      let parma = {
        employeeId: '',
        employeeName: '',
        pageNo: 1,
        pageSize: 10,
      }
      const res = await toolModel.employee(parma)
      if (res.code == 200) {
        const allData = JSON.parse(JSON.stringify(res.data.list))
        const allData2 = JSON.parse(JSON.stringify(res.data.list))
        const result = []
        allData.map(ele => {
          result.push({
            value: ele.employeeId + '',
            label: ele.toCompany,
          })
        })
        let result2 = allData2.reduce((memo, current) => {
          current.label = current.jobName
          memo[current['employeeId']] = current
          return memo
        }, {})
        that.getDictiteListHr = result
        that.getDictiteListHr2 = result2

        // return result
      }
    },
    getDate(date) {
      let myDate = new Date(date)
      let y = myDate.getFullYear()
      let m = myDate.getMonth() + 1
      let d = myDate.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      return '' + y + m + d
    },
    async handkeSearch(val) {
      var that = this
      console.log(val, 'val')
      if (val) {
        console.log('valdasdad1')
        that.searchMenu.jobId = val[1]
      }
      let searchMenu = that.searchMenu
      let sDate = ''
      if (searchMenu.recDate) {
        sDate = that.getDate(searchMenu.recDate)
      } else {
        sDate = ''
      }
      console.log(sDate, 'searchMenu')
      let params = {
        candStatu: searchMenu.candStatu,
        belongUserId: searchMenu.belongUserId,
        minsalary: searchMenu.minsalary,
        maxsalary: searchMenu.maxsalary,
        recDate: sDate,
        nature: searchMenu.nature,
        // 、选择职位
        jobId: searchMenu.jobId,
        // 、当前页数
        pageNo: 1,
        // 、当前条数
        pageSize: 10,
      }
      console.log(params, 'search params')
      this.getcandidates(1, 10, params)
      return
      try {
        var that = this
        that.loading = true
        let res = await candidateModel.getcandidates(params)
        if (res.code == 200 && res.data.data.length > 0) {
          that.listInof = res.data.data
          that.listInof.map(ele => {
            if (ele.candStatu == 0 || ele.candStatu) {
              // ele.candStatu = that.getDictiteList2[ele.candStatu].label
              ele.candStatuVal = that.getDictiteList2[ele.candStatu].label
            }
            ele.jobName = ele.jobInfo.jobName
            ele.deptName = ele.jobInfo.deptName
          })
          that.total = res.data.total
          that.loading = false
        } else {
          that.listInof = []
          that.loading = false
          that.candidates = []
        }
      } catch (error) {
        that.loading = false
        if (error.code == 10020) {
          that.candidates = []
        }
      }
    },
    // 执行获取数据等初始化动作
    async init() {
      var that = this
      this.getDictiteList1 = await this.getDictiteList(1)
      this.getDictiteList2 = await this.getDictiteList(2)
      this.getDictiteList3 = await this.getDictiteList(3)
      this.getDictiteList4 = await this.getDictiteList(4)
      this.getDictiteList5 = await this.getDictiteList(5)
      this.getDictiteList5 = await this.getDictiteList(6)
      this.getDictiteList10 = await this.getDictiteList(10)
      //候选人数据
      this.getcandidates(1, 10)
      // 职位数据
      this.positionQuery()

      //推荐
      if (this.$route.query.jump == 'recommend') {
        this.handleEdit('recommend', that.$route.query.row)
      }
    },
    //组织管理服务
    async positionQuery(deptId) {
      var that = this
      let params = {
        deptId: deptId,
        pageNo: 1,
        pageSize: 999,
      }
      try {
        that.loading = true
        let { data } = await positionModel.positionQuery(params)
        let allData = [...data.data]
        let tree10 = that.getDictiteList10.reduce((memo0, current0) => {
          memo0[current0['value']] = current0
          return memo0
        }, {})
        let treeMapList = allData.reduce((memo, current) => {
          current.label = current.deptId
          current.value = current.deptName
          if (current.deptId) {
            memo[current['deptId']] = {
              value: current.deptId,
              label: tree10[current.deptId].label,
              deptName: tree10[current.deptId].label,
              deptId: current.deptId,
              // jobId:current.jobId,
              // jobName:current.jobName,
            }
          }
          return memo
        }, {})
        let result1 = allData.reduce((arr, current) => {
          let deptId = current.deptId
          let parent = treeMapList[deptId]
          if (deptId && deptId != null) {
            parent.children
              ? parent.children.push({ value: current.jobId, label: current.jobName })
              : (parent.children = [{ value: current.jobId, label: current.jobName }])
            arr.push(parent)
          } else if (deptId == 0 && deptId != null) {
            //这是根组织
          }
          return arr
        }, [])
        that.getDictiteList11 = result1
        that.loading = false
      } catch (error) {
        that.loading = false
        if (error.code === 10020) {
          that.orgList = []
        }
      }
    },

    //获取展示列表数据
    async getcandidates(pageNo = 1, pageSize = 10, params) {
      let param = {}
      if (params) {
        param = params
      } else {
        param = {
          // 、当前页数
          pageNo: pageNo,
          // 、当前条数
          pageSize: pageSize,
        }
      }
      try {
        var that = this
        that.loading = true
        let res = await candidateModel.getcandidates(param)
        if (res.code == 200 && res.data.data.length > 0) {
          that.total = res.data.total
          that.listInof = res.data.data
          // let tree10 = that.getDictiteList10.reduce((memo0, current0) => {
          //   memo0[current0['value']] = current0
          //   return memo0
          // }, {})
          let tree10 = await that.getTree(10)
          let tree2 = await that.getTree(2)
          console.log(tree10, tree2, 'tree')
          that.listInof.map(ele => {
            //候选人状态
            if (ele.candStatu == 0 || ele.candStatu) {
              // ele.candStatu = that.getDictiteList2[ele.candStatu].label
              ele.candStatuLabel = tree2[ele.candStatu].label
            }

            //职位信息
            if (ele.jobInfo) {
              ele.jobName = ele.jobInfo.jobName
              ele.jobId = ele.jobInfo.jobId
              ele.deptName = tree10[ele.jobInfo.deptId].label
              ele.deptId = tree10[ele.jobInfo.deptId].value
            }
            //所属hr
            if (ele.belongUserId == 0 || ele.belongUserId) {
              if (that.getDictiteListHr2[ele.belongUserId]) {
                ele.belongUserName = that.getDictiteListHr2[ele.belongUserId].toCompany
              }
              console.log(ele.belongUserName, 12212, that.getDictiteListHr2, ele.belongUserId)
            }
          })
          console.log(that.listInof, 'list2')
          that.loading = false
        } else {
          that.listInof = []
          that.loading = false
          that.candidates = []
        }
      } catch (error) {
        that.loading = false
        if (error.code == 10020) {
          that.candidates = []
        }
      }
    },
    //显示详情信息、操作
    handleEdit(command, row) {
      switch (command) {
        case 'distribution':
          this.title = '候选人分配职位'
          break
        case 'edit':
          this.title = '编辑候选人'
          break
        case 'add':
          this.title = '新增候选人'
          break
        default:
          this.title = '操作'
          break
      }
      this.showEdit = true
      this.editData = {
        behavior: command,
        row: row,
      }
    },
    handleDelete(command, row) {
      this.dialogInfo.dialogNmae = row.candName
      this.dialogInfo.dialogPosition = row.jobName
      this.dialogInfo.dialogTel = row.phone
      this.dialogInfo.dialogSalary = row.minsalary + 'K - ' + row.maxsalary
      this.delId = row.candId
      this.dialogFormVisible = true
    },
    editClose() {
      this.showEdit = false
      this.getcandidates(1, 10)
    },
    // indexMethod(index) {
    //   index = index + 1
    // },
  },
}
</script>
<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: start;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .dialog-box {
    text-align: center;
    padding: 0 80px;
  }

  .dialog-title {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    color: #f4516c;
  }

  .dialog-text {
    display: flex;
    flex-wrap: wrap;
    text-align: start;

    .dialog-i {
      width: 50%;
      line-height: 24px;
      height: 24px;
      margin: 10px 0;
    }
  }
  .remark {
    display: flex;
    width: 100%;
  }
  .dialog-footer {
    text-align: center;
  }
}

.select-group {
  display: flex;

  .select-box {
    width: 30%;
    height: 24px;
    line-height: 24px;
    margin-bottom: 20px;

    span {
      display: inline-block;
      width: 90px;
    }
    .down-title {
      padding: 0 10px;
    }

    .down-div {
      border: 2px solid #007aff;
      border-radius: 4px;
      margin: 0;
      padding: 0;

      .down-dropdown {
        height: 24px;
        padding-left: 10px;
        line-height: 24px;
      }
    }
  }
}
</style>
